var btna1 = document.querySelector(".btn-2");
var vipbar = document.querySelector(".bg-box-4");
var imgClose = document.querySelector(".close");
var btnclose = document.querySelector(".next-time");


var btnSpan = document.querySelectorAll(".pay-uls li span");
var btnSpan2 = document.querySelectorAll("#pay-ul li span");

var btnLi = document.querySelectorAll(".pay-uls li");
var btnLi2 = document.querySelectorAll("#pay-ul li");

var ipt = document.querySelector(".auto-renew input");

var sp = document.querySelector(".auto-p1 .price");
var box = document.querySelector(".auto-renew");


imgClose.onclick = function(){
    vipbar.style["display"] = "none";
}

btnclose.onclick = function(){
    vipbar.style["display"] = "none"
}

btna1.onclick = function() {
    vipbar.style["display"] = "block";
}

for(var i = 0; i <btnLi.length ; i++){
    btnLi[i].setAttribute("data-index",i);
    btnLi[i].onclick = function(){
        for(var j = 0 ; j < btnLi.length; j++){
            btnLi[j].className = "";
            btnSpan[j].className = "";
        }
        var index = this.dataset.index;
        this.className = "selected";
        btnSpan[index].className = "corner";
        if(index == 0) {
            sp.innerText ="18";
            box.style["display"] = "none"
        }else if (index == 1){
            sp.innerText ="54";
            box.style["display"] = "none"
        }else if ( index == 2) {
            sp.innerText ="108";
             box.style["display"] = "none";
        }else {
            sp.innerText ="172";
            box.style["display"] = "block"
        }
    }
 
}

for(var i = 0; i < btnLi2.length ; i++){
    btnLi2[i].setAttribute("data-index",i);
    btnLi2[i].onclick = function(){
        for(var j = 0 ; j <btnLi2.length; j++){
            btnLi2[j].className = "";
            btnSpan2[j].className = "";
        }
        var index = this.dataset.index;
        this.className = "selected";
        btnSpan2[index].className = "corner";
    }
}



ipt.addEventListener("click",function(){
          if(ipt.getAttribute("checked") == true){
              sp.innerText =" 172";
              ipt.removeAttribute("checked")
          }else {
             sp.innerText = "198";
             ipt.setAttribute("checked",1)
          }
})





  
